<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getMembersList"></el-button>

    <!-- <el-button type="primary" icon="el-icon-plus" style="margin:10px" @click="getShow" v-if="Register != -1">添加管理员</el-button> -->
    <!--    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-tooltip content="搜索用户" placement="top" slot="append">
        <el-button icon="el-icon-search" @click="getMembersList"></el-button>
      </el-tooltip>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button> -->
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-button @click="handleExport2" style="margin-right: 50px;">导出报表</el-button>

    <el-date-picker v-model="valueData" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>
    </el-date-picker>
    <el-button style="margin-left: 10px;" icon="el-icon-search" @click="rangeChange"></el-button>
    <div style="display: flex;" class="ren">
      <div><span>总人数：</span>{{total}}</div>
      <div><span>有效人数：</span>{{ids.length}}</div>
      <div><span>无效人数：</span>{{idss}}</div>
    </div>

    <el-table id="table" style="width: 100%;" border :data="list">
      <!--   <el-table-column prop="userName" label="用户名" align="center">
      </el-table-column> -->
      <!--  <el-table-column prop="sex" label="性别" align="center" width="60">
        <template slot-scope="{ row, $index }">
          <p>{{ row.sex == 1 ? '男' : '女' }}</p>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="头像" align="center" width="80">
        <template slot-scope="{ row, $index }">
          <img :src="$staticURL+row.headimgUrl" style=" width:40px; height:40px" />
        </template>
      </el-table-column> -->
      <el-table-column prop="toUserNickName" label="被邀请人" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="用户昵称" align="center">
      </el-table-column>
     <!-- <el-table-column prop="effective" label="是否有效" align="center">
      </el-table-column> -->
      <el-table-column label="是否有效" align="center" :filters="[{ text: '有效', value: '1' }, { text: '无效', value: '' }]"
        :filter-method="filterMethod" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p>{{row.effective}}</p>
        </template>
      </el-table-column>
      <!--   <el-table-column label="是否有效" align="center">
        <template slot-scope="{ row, $index }">
          <p v-if="row.toUserNickName != ''">1</p>
          <p v-else>0</p>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="totalIncome" label="总收入" align="center">
      </el-table-column> -->
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <!--      <el-table-column prop="balance" label="零钱" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="name" label="真实姓名" align="center">
      </el-table-column>
      <el-table-column prop="idcard" label="身份证号" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" align="center">
      </el-table-column> -->
      <!-- <el-table-column prop="userRole" label="角色身份" align="center">
      </el-table-column> -->
      <!-- <el-table-column prop="userRole" label="角色" align="center">
      </el-table-column> -->
      <!--    <el-table-column label="操作" align="center">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-popconfirm title="是否删除该用户？" icon="el-icon-info" icon-color="red" @confirm="getDelete(row.id)">
            <el-tooltip content="删除用户" placement="top" slot="reference">
              <el-button type="danger" icon="el-icon-delete"></el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 分页 -->
    <!-- <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[ 10, 50, 100]"
      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
  </div>
</template>

<script>
  import {
    exportToExcel
  } from '@/utils/Export2Excel'
  export default {
    name: 'Distribution',
    //挂载完毕发送请求
    mounted() {
      const today = new Date();
      // 获取当前时间(today)的年份
      const year = today.getFullYear();
      // 获取月份
      const month = String(today.getMonth() + 1).padStart(2, '0');
      // // 获取当前日
      // const day = String(today.getDate()).padStart(2, '0');
      // // 得到年月日
      // const thisDayDate = `${year}-${month}-${day}`; //打印当前日期
      console.log(year, month)
      let ym = year + '-' + month
      this.valueData[0] = ym + '-' + '01'
      this.valueData[1] = ym + '-' + this.getLastDayOfMonth(year, month)
      //获取列表数据方法
      this.getMembersList()
    },
    data() {
      return {
        valueData: [],
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10000,
        //总条数
        total: 0,
        //列表数据
        list: [],
        //角色数组
        options: [],
        dialogFormVisible: false,
        tmForm: {
          nickName: '',
          userName: '',
          password: '',
          headimgurl: '',
          roleId: '',
          sex: ''
        },
        //搜索
        searchText: '',
        // 表单验证
        rules: {
          nickName: [{
              required: true,
              message: '请输入昵称',
              trigger: 'blur'
            },
            {
              min: 2,
              message: '长度在 2 个字符以上',
              trigger: 'change'
            }
          ],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }],
          headimgurl: [{
            required: true,
            message: '请上传头像'
          }],
          roleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }]
        },
        ids: [],
        idss: 0
      }
    },

    methods: {
      // 获取某年某月的最后一天
      getLastDayOfMonth(year, month) {
        var date = new Date(year, month - 1, '01');
        //设置日期
        date.setDate(1);
        //设置月份
        date.setMonth(date.getMonth() + 1);
        //获取本月的最后一天
        var cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
        //返回结果
        return cdate.getDate();
      },
      rangeChange() {
        console.log('时间范围', this.valueData)
        if (!this.valueData) {
          this.valueData = []
        }
        this.getMembersList()
      },
      handleExport2() {
        let auditResult = prompt('报表名字：');
        if (auditResult != null && auditResult != "") {
          exportToExcel('#table', auditResult);
        }
      },
      addDate(strDate) {
        let dateFormat = new Date(strDate);
        dateFormat = dateFormat.setDate(dateFormat.getDate() + 1);
        dateFormat = new Date(dateFormat);
        let y = dateFormat.getFullYear()
        let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
        let d = dateFormat.getDate().toString().padStart(2, '0')
        return `${y}-${m}-${d}`
      },
      async getMembersList() {
        let res = await this.$API.running.getAllUserDistributionByTimeDesc({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          orderBY: '',
          endTime: this.addDate(this.valueData[1]),
          startTime: this.valueData[0]
        })
        for (var i = 0; i < res.data.rows.length; i++) {
          if (res.data.rows[i].toUserNickName == '') {
            res.data.rows[i].effective = ''
          } else {
            res.data.rows[i].effective = 1
          }
        }

        this.ids = res.data.rows.filter(function(item) {
          return item.effective == 1
        })
        // console.log(this.ids)
        this.idss = Number(res.data.sumLine) - Number(this.ids.length)

        this.total = res.data.sumLine;
        this.list = res.data.rows;
        console.log(this.list)

      },
      reSetting() {
        this.searchText = '';
        this.getMembersList();
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getMembersList();
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pageNumber = val;
        this.getMembersList();
      },
      filterMethod(value, row) {
        console.log(value, row)
        return row.effective == value;
      }
    }
  }
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .ren {
    margin: 10px 0;

    div {
      margin-left: 20px;

      span {
        color: #000;
        font-size: 14px;
      }
    }
  }
</style>
